<script setup lang="ts">
import { computed, inject } from "vue";
import TableRow from "@renderer/view/tagPage/components/TableRow.vue";

const { searchVal, tagsInfo } = inject("tagInfo") as any;
const headers = [
  {
    align: "start",
    key: "tagId",
    sortable: false,
    title: "Tag ID",
  },
  {
    align: "start",
    key: "description",
    sortable: false,
    title: "Description",
  },
  {
    align: "start",
    key: "value",
    sortable: false,
    title: "Value",
  },
];

const {
  selected
} = inject("tagInfo") as any;

const toggleSelect = (val: any) => {
  if (selected.value.includes(val)) {
    selected.value.splice(selected.value.indexOf(val), 1);
  } else {
    selected.value.push(val);
  }
};
const isSelected = (item) => {
  return selected.value.includes(item);
};
const someSelected = computed(() => {
  return selected.value.length > 0;
});
const allSelected = computed(() => {
  return selected.value.length === tagsInfo.value.length;
});
const selectAll = () => {
  if (allSelected.value) {
    selected.value = [];
  } else {
    selected.value = tagsInfo.value.slice(0);
  }
};
</script>

<template>
  <v-data-table
    class="h-[600px]"
    show-select
    :fixed-header="true"
    :fixed-footer="true"
    :headers="headers"
    :items="tagsInfo"
    :search="searchVal"
    v-model="selected"
  >
    <template v-slot:header.data-table-select="{}">
      <v-checkbox-btn
        :indeterminate="someSelected && !allSelected"
        :model-value="allSelected"
        color="primary"
        @update:model-value="selectAll"
      ></v-checkbox-btn>
    </template>

    <template v-slot:item="{ item }">
      <TableRow
        :items="[item]"
        :depth="0"
        :isSelected="isSelected(item)"
        :toggleSelect="toggleSelect"
      />
    </template>
  </v-data-table>
</template>

<style scoped></style>
